<template>
  <van-skeleton title :row="3" style="margin-top:10px;" :loading="loading">
    <div>
      <div class="ha">
        <!-- <span @click="bank">111</span> -->
        <van-nav-bar title="收货" left-arrow @click-left="bank" />
      </div>
      <div>
        <van-cell-group>
          <van-cell>
            <span style="float: left;">订单号</span>
            <van-tag type="success">{{ datas.oid }}</van-tag>
          </van-cell>
          <van-cell>
            <span style="float: left;">供应商</span>
            <van-tag type="primary">{{ datas.details[index].supplier }}</van-tag>
          </van-cell>
          <van-cell-group class="exam-container" v-for="(item, index) in datas.details" :key="item">
            <van-cell>
              <span style="float: left;">商品{{ index + 1 }}</span>
              <van-tag type="warning">{{ item.name }}</van-tag>
            </van-cell>

            <van-cell>
              <span style="float: left;">金额</span>
              <van-tag type="danger">￥{{ item.price }} × {{ item.number }}= ￥{{ item.price }}</van-tag>
            </van-cell>

            <van-cell>
              <span style="float: left;">收货数量(件)</span>
              <van-field
                class="num"
                input-align="right"
                v-model="item.number"
                type="digit"
                @blur="shoppCount(item)"
              ></van-field>
            </van-cell>

            <van-cell>
              <span style="float: left;">收货金额(元)</span>
              <van-field
                class="num"
                input-align="right"
                type="digit"
                v-model="item.money"
                @blur="shoppMoney(item)"
              />
            </van-cell>
          </van-cell-group>
          <van-cell-group inset>
            <span style="float: left;" class="zi">说明</span>
            <van-field
              class="titls"
              autosize
              type="textarea"
              v-model="datas.titles"
              placeholder="请输入描述说明"
            />
          </van-cell-group>
        </van-cell-group>
        <van-button class="but" type="primary" @click="shouhuo">收货</van-button>
      </div>
    </div>
  </van-skeleton>
</template>

<script>
import { reactive, toRefs, onMounted } from "vue";
import { useRouter } from "vue-router";
import { getMerchantSingleOrder, merchantReceive } from "../../api/order";
import { showToast, showConfirmDialog } from "vant";
export default {
  setup() {
    const router = useRouter();
    const data = reactive({
      datas: [],
      id: "",
      index: 0,
      loading: true,
      number: 0,
      money: 0,
      order: {},
      explain: ""
    });
    data.id = router.currentRoute.value.params.id;
    const events = {
      shoppMoney(val) {
        let temp = data.order.details.find(d => d.id == val.id);
        console.log(val.money,"-=-=-=-=");
        if (val.money != null && val.money != 0 && val.money <= temp.money) {
          data.order.details.find(d => {
            if (d.id === val.id) {
              d.receiveMoney = parseInt(val.money);
              console.log(d.receiveMoney,"-=-=-=-=");
            }
          });
        } else if (val.money > temp.receiveMoney) {
          showToast("金额不允许大于原本金额");
          data.order.details.find(d => {
            if (d.id === val.id) {
              d.money = parseInt(d.receiveMoney);
            }
          });
        }
      },
      shoppCount(val) {
        if (val.number != null) {
          data.order.details.find(d => {
            if (d.id === val.id) {
              d.receiveNumber = parseInt(d.number);
            }
          });
        } else if (val.number <= 0 && val.number > data.order.details.number) {
          // showToast("数量不允许小于0,或者大于原本数量");
          data.order.details.find(d => {
            if (d.id === val.id) {
              d.receiveNumber = parseInt(d.number);
            }
          });
        }
      },
      bank() {
        router.go(-1);
      },
      shouhuo(val) {
        data.explain = val.titles;
        const details = [];
        data.order.details.forEach(d => {
          details.push({
            id: d.id,
            receiveNumber: d.receiveNumber,
            receiveMoney: d.receiveMoney
          });
        });
        console.log(details);

        showConfirmDialog({
          title: "提示",
          message: `确认收货吗?`,
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          confirmButtonColor: "green",
          overlay: true
        })
          .then(() => {
            merchantReceive({
              id: data.id,
              explain: data.explain,
              details: details
            }).then(res => {
              if (res.result === 0) {
                showToast("操作成功");
                router.go(-1);
                console.log(res);
              }
            });
            点击确认按钮后执行的操作
          })
          .catch(() => {
            // 点击取消按钮后执行的操作
          });
      }
    };

    onMounted(() => {
      getMerchantSingleOrder({
        id: data.id
      }).then(res => {
        if (res.result === 0) {
          data.datas = res.data;
          data.loading = false;
          data.order = res.data;
          data.order.details.forEach(d => {
            d.receiveNumber = d.number;
            d.receiveMoney = d.money;
          });
        }
      });
    });
    return {
      ...toRefs(data),
      ...events
    };
  }
};
</script>

<style scoped>
.ha {
  /* height: calc(100vh - 100px); */
  overflow: auto;
  line-height: 50px;
  /* margin-top: 50px; */
  height: 50px;
}

.but {
  margin-left: 10px;
  margin-top: 15px;
  margin-bottom: 5px;
  width: 95%;
}

.zi {
  margin-top: 3px;
  color: #969799;
  font-size: 14px;
}

.titls {
  width: 260px;
  float: right;
  padding: 0 0 15px 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.num {
  text-align: center;
  width: 200px;
  padding: 0;
  float: right;
}

.exam-container {
  margin: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  border-radius: 2px;
}
</style>